<template lang="html">
  <div>
    <label class="a-btn loading">123</label>
  </div>
</template>

<script>
let bind = function (target, handler) {
  target.__handlers = target.__handlers || []
  target.__binded = target.__binded || []
  target.__handlers.push(handler)
  console.log("target", target);
  for (let key in target) {
    if (key.indexOf('__') < 0 && target.__binded.indexOf(key) < 0) {
      target.__binded.push(key);
      (function (prop) {
        var oldVal = target[key]
        Object.defineProperty(target, prop, {
          set: function (newVal) {
            oldVal = newVal;
            target.__handlers.forEach(func => {
              func.apply(target)
            })
          },
          get: function () {
            return oldVal
          }
        })
      })(key)
    }
  }
}
export default {
  created () {
    let person = {
      name: 'defore',
      age: 19,
      title: '测试标题'
    }

    bind(person, function () {
      console.log(`name: ${this.name}`)
    })
    bind(person, function () {
      console.log(`age: ${this.age}`)
    })

    person.name = 'tom';

  }
}
</script>

<style lang="scss" scoped>
/* 按钮loading */
a[class*=-btn].loading,
label[class*=-btn].loading {
    position: relative;
}
a[class*=-btn].loading::first-line,
label[class*=-btn].loading::first-line {
    color: transparent;
}
a[class*=-btn].loading::before,
label[class*=-btn].loading::before {
    width: 4px; height: 4px;
    margin: auto;
    content: '';
    -webkit-animation: spinZoom 1s steps(8) infinite;
    animation: spinZoom 1s steps(8) infinite;
    border-radius: 100%;
    box-shadow: 0 -10px 0 1px currentColor, 10px 0 currentColor, 0 10px currentColor, -10px 0 currentColor, -7px -7px 0 .5px currentColor, 7px -7px 0 1.5px currentColor, 7px 7px currentColor, -7px 7px currentColor;
    /* center */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}
/* loading动画 */
@-webkit-keyframes spinZoom {
    0% {
        -webkit-transform: scale(.75) rotate(0);
    }
    100% {
        -webkit-transform: scale(.75) rotate(360deg);
    }
}
@keyframes spinZoom {
    0% {
        transform: scale(.75) rotate(0);
    }
    100% {
        transform: scale(.75) rotate(360deg);
    }
}
</style>
